<template>
  <div>
    <a-card class="cardBox " :tab-list="tabList" :active-tab-key="noTitleKey" @tabChange="key => onTabChange(key, 'noTitleKey')">
      <!--<div class="tit" slot="title">理论/制度成果</div>-->
      <div class="content" style="height: 355px">
        <div v-if="noTitleKey==='tab1'">
          <ul class="files">
            <li v-for="(item, i) in filesData" :key="i" @click="filesRowClick(item)">
              <span>{{ i+1 }}</span>
              <p class="ellipsis">{{ item.name }} <i class="iconfont icon-24px" v-if="item.type==='download'"></i></p>
            </li>
          </ul>
        </div>
        <div v-if="noTitleKey==='tab2'">
          <ul class="files">
            <li v-for="(item, i) in filesData2" :key="i" @click="filesRowClick(item)">
              <span>{{ i+1 }}</span><p class="ellipsis">{{ item.name }}</p>
            </li>
          </ul>
        </div>
        <div v-if="noTitleKey==='tab3'">
          <ul class="files">
            <li v-for="(item, i) in filesData3" :key="i" style="cursor: default;">
              <span>{{ i+1 }}</span><p class="ellipsis">{{ item.name }}</p>
            </li>
          </ul>
        </div>
      </div>
    </a-card>
    <a-modal v-model="filesVisible" width="88%" :footer="null" :centered="true" :title="filesTitle">
      <div class="modalContent">
        <img v-if="filesImgSrc===1" src="@/assets/img/pic1.png" class="filesImg">
        <img v-if="filesImgSrc===2" src="@/assets/img/pic2.png" class="filesImg">
        <img v-if="filesImgSrc===3" src="@/assets/img/pic3.png" class="filesImg">
        <img v-if="filesImgSrc===4" src="@/assets/img/pic4.png" class="filesImg">
        <img v-if="filesImgSrc===5" src="@/assets/img/pic5.png" class="filesImg">
        <img v-if="filesImgSrc===6" src="@/assets/img/pic6.png" class="filesImg">
        <img v-if="filesImgSrc===24" src="@/assets/img/pic24.png" class="filesImg">
        <img v-if="filesImgSrc===25" src="@/assets/img/pic25.png" class="filesImg">
        <img v-if="filesImgSrc===27" src="@/assets/img/pic27.png" class="filesImg">
      </div>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: 'HytBoard9',
    data () {
      return {
        downloadUrl: 'https://hyt.dongyang.gov.cn/hdFile/api/common/file/download/hyt_zf_app/',
        showUrl: 'https://hyt.dongyang.gov.cn/hdFile/api/common/file/show/hyt_zf_app/',
        filesVisible: false,
        filesTitle: '',
        filesImgSrc: '',
        noTitleKey: 'tab1',
        tabList: [
          {
            key: 'tab1',
            tab: '理论成果'
          },
          {
            key: 'tab2',
            tab: '制度成果'
          },
          {
            key: 'tab3',
            tab: '推广成果'
          }
        ],
        filesData: [
          { id: 1, name: '中国·横店影视文化产业集聚区指数', flag: 1 },
          { id: 2, name: '中国·横店影视文化产业发展环境指数', flag: 1 },
          { id: 3, name: '中国·横店影视文化产业影响力指数', flag: 1 },
          { id: 4, name: '中国·横店影视文化产业创新指数', flag: 1 },
          { id: 5, name: '中国·横店影视文化产业国际性指数', flag: 1 },
          { id: 6, name: '中国·横店影视文化产业综合景气指数', flag: 1 },
          { id: 7, name: '中国影视文化行业人才发展报告', flag: 0, type: 'download', filesId: '44b47bf33a5148548c9caca84cdbc759' }
        ],
        filesData2: [
          { id: 21, name: '”未来影视工厂”影视制作标准化流程', flag: 0 },
          { id: 22, name: '影视文化产业综合调查制度', flag: 0 },
          { id: 23, name: '影视拍摄外景基地管理办法', flag: 0 },
          { id: 24, name: '关于室内摄影棚安全整治的补充意见', flag: 1 },
          { id: 25, name: '特约演员日常管理“码分”制度', flag: 1 },
          { id: 26, name: '剧组管理指导意见', flag: 0 },
          { id: 27, name: '关于剧组临时党支部规范化建设的指导意见', flag: 1 }
    ],
        filesData3: [
          { id: 1, name: '中共浙江省委办公厅《浙江信息》，东阳市上线“影视文化大脑”数字赋能影视产业高质量发展（12月11日）', flag: 0 },
          { id: 2, name: '学习强国浙江学习平台，金华东阳：“影视文化大脑”入选浙江省数字化改革“最佳应用”。（12月24日）', flag: 0 },
          { id: 3, name: '中共浙江省委宣传部《宣传》，剧组的事“数字大脑”帮办（12月上）', flag: 0 },
          { id: 4, name: '《共同富裕在浙江》直播介绍影视文化大脑（5月16日）', flag: 0 },
          { id: 5, name: '《浙江新闻联播》头条介绍影视文化大脑（5月28日）', flag: 0 },
          { id: 6, name: '(头版)浙江日报《这个“大脑”很懂戏 东阳开发特色应用助力影视业高质量发展》(11月15日)', flag: 0 },
          { id: 7, name: '浙江新闻《2021中国（横店）影视文化产业发展大会召开 聚焦人才、指数和“大脑”》(10月22日)', flag: 0 },
          { id: 8, name: '新华财经《横店影视文化产业大脑亮相 推动产业治理数据智能化》(10月22日)', flag: 0 }
          // { id: 4, name: '环球网《2021中国（横店）影视文化产业发展大会召开 聚焦人才、指数和“大脑”》(10月24日)', flag: 0 },
          // { id: 5, name: '金华政务网《实现全产业链数字化 推动治理数据智能化  产业大脑赋能横店影视文化加速跑》(10月25日)', flag: 0 },
          // { id: 6, name: '广州日报《横店“大脑系统”提供影视文化产业新经验，影视“全产业链”智能迭代》(11月15日)', flag: 0 },
          // { id: 7, name: '浙江省人民政府官网首页热点关注《东阳开发特色应用助力影视业高质量发展 这个“大脑”很懂戏》(11月15日)', flag: 0 }
        ]
      }
    },
    mounted () {

    },
    watch: {
    },
    methods: {
      onTabChange (key, type) {
        this[type] = key
      },
      filesRowClick (data) {
        // filesId
        if (data.filesId) {
          const { downloadUrl } = this
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = `${downloadUrl}${data.filesId}`
          link.setAttribute('download', data.name)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
          return
        }
        if (!data.flag) {
          this.warning()
          return
        }
        this.filesVisible = true
        this.filesTitle = data.name
        this.filesImgSrc = data.id
      },
      warning () {
        this.$message.warning('涉密不公开')
      }
    }
  }
</script>

<style scoped lang="less">
  .cardBox {
    margin-bottom: 16px;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
    .tit {
      position: relative;
      padding-left: 8px; font-size: 20px;
    }

    .tit::before {
      display: inline-block;
      content: '';
      width: 2px;
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 2px;
      background: #1890ff
    }
  }
  .files {
    li { border-bottom: 1px solid #ddd; display: flex; padding: 10px 8px; cursor: pointer}
    span {display: inline-block; background-color: #00BAFF; border-radius: 3px;
      padding: 0 5px; color: #fff;}
    p {margin-bottom: 0; padding-left: 8px; font-size: 16px;}
  }
  .modalContent
  .filesImg {max-width: 100%; display: block; margin: auto}
  .ellipsis{overflow: hidden; text-overflow:ellipsis;
    white-space: nowrap;}
</style>
